<template>
  <div class="filter_boxer">
    <div class="filter_content">
      <!-- 一级分类 -->
      <div class="filter_left">
        <div
          :class="
            item.code == sortId
              ? 'filter_left_hover filter_left_list'
              : 'filter_left_list'
          "
          @click="sortTap(item.code, item.typeName, item.showName,item.id)"
          v-for="item in sort"
          :key="item.code"
        >
          <span :class="item.code == sortId ? 'filter_list_hover' : ''">{{
            item.showName
          }}</span>
        </div>
      </div>
      <!-- 二级分类 -->
      <div class="filter_right">
        <span class="filter_title">全部</span>
        <div class="filter_right_container">
          <div
            class="filter_right_list"
            :class="isActive.indexOf((item.code))> -1 ? 'filter_right_hover' : 'filter_right_list' "
            v-for="item in label"
             @click="labelTap(item,item.code, item.showName)"
            :key="item.code"
          >
            <div class="filter_right_item"

>
              <!-- <img src="@/assets/resource/pink_bg.png" class=""/> -->
              {{ item.showName }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="filter_btn">
      <div class="filter_reset" @click="resetBtn">重置</div>
      <div class="filter_confirm" @click="filterBtn">确定</div>
    </div>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import { getList, getListTree, getListTreeBranch } from "@/api/resource.js";
import searchVue from "./search.vue";

export default {
  name: "filterIndex",
  props:['searchType','drawer','resourceType'],
  data() {
    return {
      // 一级分类
      bookId: {
        name: "0"
      },
      // 二级分类
      secondId: {
        name: "",
        num: 10
      },
      // 一级分类名称
      sortName: "",
      // 二级分类名称
      labelName: "",
      // searchType: "2",
      sortId: "",
      labelId: "",
      // 一级ID
      parentId:"",
      sort: [],
      label: [],
      dataList: [],
      listQuery: {
        pageSize: 10,
        pageNum: 1,
        resourceType: "",
        diyTypeCode: "",
        labelContentDiyTypeId: "",
        content: "",
        name: ""
      },
      diyTypeCode: [],
      labelContentDiyTypeId: [],
      pageName: "",
      show:false,
      spanIndex:[],
      isActive: [],
    };
  },
  mounted() {
    this.listQuery.resourceType = this.resourceType
    if(this.resourceType){
      this.getData()
    }
    this.listQuery.resourceType = this.resourceType
    localStorage.clear("resourceType");
    if (this.$route.query.obj.diyTypeCode) {
      //分类
      let data = (this.listQuery.diyTypeCode = data);
      this.diyTypeCode = data;

      this.listQuery.diyTypeCode = this.$route.query.obj.diyTypeCode;
      this.diyTypeCode = this.$route.query.obj.diyTypeCode.split(",");
    }
    if (this.$route.query.obj.resourceType) {
      this.listQuery.resourceType = this.$route.query.obj.resourceType;
    }
    if (this.$route.query.obj.name) {
      //页面类型 ---问答还是resource
      this.listQuery.name = this.$route.query.obj.name;
      this.pageName = this.$route.query.obj.name;
    }
    if (this.$route.query.obj.labelContentDiyTypeId) {
      this.listQuery.labelContentDiyTypeId = this.$route.query.obj.labelContentDiyTypeId;
      this.labelContentDiyTypeId = this.$route.query.obj.labelContentDiyTypeId.split(
        ","
      );
    }
    if (this.$route.query.obj.content) {
      this.listQuery.content = this.$route.query.obj.content;
    }
    // this.getData();
  },
  watch:{
    resourceType(){
      this.listQuery.resourceType = this.resourceType
      this.getData()
    }
  },
  methods: {
    getData() {
      getList(this.listQuery).then(res => {
        let that = this;
        // 判断图书种类
        if (res.data.data.resList[0].resourceType == 1) {
          this.bookId.name = "图书分类";
          this.secondId.name = "旧书残书";
          this.searchType = 1;
        } else if (res.data.data.resList[0].resourceType == 4) {
          this.bookId.name = "视频分类";
          this.secondId.name = "";
          this.searchType = 2;
        } else {
          this.bookId.name = "音频分类";
          this.secondId.name = "";
          this.searchType = 3;
        }
        // 获取一级分类
        getListTree(this.bookId).then(res => {
          let that = this;
          this.sort = res.data.data[0].children;
          // 默认选中第一项
          // this.sortId = this.sort[0].code;
          // this.secondId.name = res.data.data[0].children[0].showName;
          this.secondId.name = res.data.data[0].children[0].typeName;
          this.parentId = res.data.data[0].children[0].id
          // 获取二级分类
          getListTreeBranch(this.parentId).then(res => {
            let that = this;
            if(res.data.code == 0){
               this.label = res.data.data;

            }
            // this.labelId = this.label[0].code;
          });
        });
      });
    },
    sortTap(code, typeName, showName,id) {
      // 选择一级分类
      this.sortId = code;
      // this.secondId.name = showName;
      this.secondId.name = typeName;
      this.sortName = showName;
      this.parentId = id;
      // getListTreeBranch(this.secondId).then(res => {
      //   let that = this;
      //   this.label = res.data.data;
      //   // 默认选中第一项
      //   // this.labelId = this.label[0].code;
      // });
            // 获取二级分类
      getListTreeBranch({id:this.parentId}).then(res => {
        let that = this;
        if(res.data.code == 0){
            this.label = res.data.data;

        }
        // this.labelId = this.label[0].code;
      });
    },
    labelTap(item,code,showName) {
       if(this.isActive.indexOf((code)) > -1){
         this.isActive.splice(this.isActive.indexOf((code)),1)
      }else{
          this.isActive.push((code));
      }
      // 选择二级分类
      this.labelId = code;
      this.label.name = showName;
      this.labelName = showName;
    },
    resetBtn() {
      //重置
      this.labelContentDiyTypeId = [];
      this.diyTypeCode = [];
      this.listQuery.diyTypeCode = "";
      this.listQuery.labelContentDiyTypeId = "";
      this.labelId = "";
      this.sortId = "";
      this.getData();
    },
    // 确定
    filterBtn() {

      if(this.labelId == ""){
        this.$emit("diyId",this.sortId)
      }else{
        this.$emit("diyId",this.isActive)
        this.labelId =""
      }
      this.$emit("show",false)
    }
  }
};
</script>

<style scoped>
.filter_boxer {
  position: relative;
}
.filter_content {
  display: flex;
  min-height: 100vh;
  padding-bottom: 1.04rem;
}
/* 左侧一级分类 */
.filter_left {
  width: 1.8rem;
  background: #f9f9fb;
}
.filter_left_list {
  vertical-align: middle;
  padding: 0.2rem 0.2rem;
  box-sizing: border-box;
  color: #333;
  font-size: 12px;
  font-weight: 400;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.filter_left_list span {
  /* padding-left: 0.58rem; */
   /* border-left: solid 0.05rem #fd6f67; */
   line-height: 0.44rem;

}
.filter_left_hover {
  color: #fd6f67;
  background: #fff;
  border-left: solid 0.05rem #fd6f67;
}
/* 右侧二级分类 */
.filter_right {
  flex: 1;
  background: #fff;
  padding: 0 0.48rem;
}
.filter_right_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.filter_title {
  font-size: 16px;
  font-weight: bold;
  margin-top: 0.6rem;
  display: block;
}
.filter_right_list {
  width: 2rem;
  height: 0.53rem;
  background: #f2f2f2;
  border-radius: 1rem;
  line-height: 0.45rem;
  /* padding: 0.32rem 0; */
  margin: 0.2rem 0;
  color: #333333;
  font-weight: 500;
  font-size: 16px;
  display: flex;
  justify-content: center;
}
.filter_right_hover {
  background: #fceeed;
  border: 1px solid #fe938e;
  box-sizing: border-box;
}
.filter_right_item {
  line-height: 0.53rem;
  font-size: 10px;
}
.fliter_hover {
  color: #326ad9;
}
/* 底部按钮 */
.filter_btn {
  position: fixed;
  height: 1.5rem;
  /* left: 0; */
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  background: white;
  padding-top: 0.5rem;
  box-sizing: border-box;

}
.filter_reset,
.filter_confirm {
  width: 2.93rem;
  /* width: 40%; */
  float: left;
  height: 0.65rem;
  font-weight: 500;
  font-size: 15px;
  text-align: center;
  line-height: 0.64rem;
  border-radius: 1rem;
}
.filter_reset {
  background: #ffffff;
  color: #333333;
  border: 1px solid #999;
}
.filter_confirm {
  background: #fd6f6b;
  color: #fff;
}
</style>
